<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
    <style rel="stylesheet" type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: url("dm2.png") no-repeat;
            background-size: 100% 100%;
            background-attachment: fixed;
        }

        table {
            position: absolute;
            top: 40%;
            left: 40%;
        }

        td {
            font-size: 15px;

        }

        input {
            margin-left: 15px;
            width: 300px;
            height: 30px;
        }

        #btn {
            width: 100px;
            height: 40px;
            position: relative;
            left: 20%;
            top: 20px;
            background-color: #666666;
            border: 0px;
        }

        span {
            padding: 5px 20px 5px 10px;
            margin-left: 10px;
            display: inline-block;
            width: 370px;
        }

        caption {
            font-size: 30px;
            margin-bottom: 20px;
            position: relative;
            right: 22%;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var username = document.querySelector("input[name='username']");
            var password = document.querySelector("input[name='password']");
            var repwd = document.querySelector("input[name='repwd']");
            var tel = document.querySelector("input[name='tel']");
            var email = document.querySelector("input[name='email']");
            var btn_post = document.getElementById("btn");
            var span_remind = document.getElementsByTagName("span")[0];
            var span_remind1 = document.getElementsByTagName("span")[1];
            var span_remind2 = document.getElementsByTagName("span")[2];
            var span_remind3 = document.getElementsByTagName("span")[3];
            var span_remind4 = document.getElementsByTagName("span")[4];
            console.log(username);
            console.log(password);
            console.log(repwd);
            console.log(tel);
            console.log(email);
            console.log(btn_post);
            console.log(span_remind1);


            btn_post.onclick = function () {
                var username_regx = /^([A-Z]|[a-z]){4,12}$/;
                var password_regx = /\w{6,20}/;
                var tel_regx = /(^(13|14|15|17|18))\d{9}$/;
                var email_regx = /^(\w+(\_|\-|\.)*)+@(\w+(\-)?)+(\.\w{2,})+$/;
                if (username.value.match(username_regx)) {
                    span_remind.innerHTML = null;
                    span_remind.style.border = null;
                } else {
                    span_remind.innerHTML = "长度4-12，英文大小写字母，请重新输入";
                    span_remind.style.border = " 1px solid black";
                }

                if (password.value.match(password_regx)) {
                    span_remind1.innerHTML = null;
                    span_remind1.style.border = null;
                } else {
                    span_remind1.innerHTML = "长度6-20，大小写字母、数字或下划线，请重新输入";
                    span_remind1.style.border = "1px solid black"
                }

                if (password.value == repwd.value) {
                    span_remind2.innerHTML = null;
                    span_remind2.style.border = null;
                } else {
                    span_remind2.innerHTML = "输入框不能为空，请重新输入";
                    span_remind2.style.border = "1px solid black"
                }

                if (tel.value.match(tel_regx)) {
                    span_remind3.innerHTML = null;
                    span_remind3.style.border = null;
                } else {
                    span_remind3.innerHTML = "13、14、15、17、18开头的11位手机号，请重新输入";
                    span_remind3.style.border = "1px solid black";
                }

                if (email.value.match(email_regx)) {
                    span_remind4.innerHTML = null;
                    span_remind4.style.border = null;
                } else {
                    span_remind4.innerHTML = "用户名@域名（域名后缀至少2个字符），请重新输入"
                    span_remind4.style.border = "1px solid black";
                }
            }
        }
    </script>
</head>
<body>
<form>
    <table>
        <caption>填写注册信息</caption>
        <tr>
            <td>用户名称:<input name="username" placeholder="长度4~12，英文大小写字母"><span></span></td>
        </tr>
        <tr>
            <td>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:<input name="password" placeholder="长度6~12，大小写字母"><span></span></td>
        </tr>
        <tr>
            <td>确认密码:<input name="repwd" placeholder="请再次输入密码进行确认"><span></span></td>
        </tr>
        <tr>
            <td>手机号码:<input name="tel" placeholder="13、14、15、17、18开头的11位手机号"><span></span></td>
        </tr>
        <tr>
            <td>电子邮箱:<input name="email" placeholder="用户名@域名（域名后缀至少2个字符）"><span></span></td>
        </tr>
        <tr>
            <td>
                <input type="button" value="注册" id="btn">
            </td>
        </tr>
    </table>
</form>
</body>
</html>